import { MenuOutlined, ClusterOutlined, EyeOutlined, EditOutlined } from '@ant-design/icons'
import { Tooltip, Tag, Checkbox } from 'antd'
import BeautyMenu from '@/desktop/components/BeautyMenu'
import  defaultAvatar  from '@/desktop/assets/avatar.jpg'
import { colors, ellipsis } from '@/desktop/styles'
import { useEmotionClassName } from '@/lib/emotion'
import services from '@/services'
import type { Account } from '@/services/auth'
import type { AccountGroup } from '@/services/features/accounts'

export function AccountItem(props: {
  item: Account
  groups: AccountGroup[] // 此账号归属哪些分组
  qywxCount: number // 此账号有多少在线的企业微信
  operatorAccount: Account // 当前操作者账号
  isSelected: boolean // 是否正在查看此账号的详情
  onSelect: (id: string) => void
  isChoosed: boolean // 是否勾选了此账号
  switchChoose: (id: string) => void
  onEditPermissions: (id: string) => void
  onEditPassword: (id: string) => void
}) {
  const getClassName = useEmotionClassName()
  const {
    item,
    groups,
    qywxCount,
    operatorAccount,
    isSelected,
    onSelect,
    isChoosed,
    switchChoose,
    onEditPermissions,
    onEditPassword
  } = props

  const onClick = useCallback(() => onSelect(item.id), [item, onSelect])

  const setPermissionsOnClick = useCallback(
    (e: React.MouseEvent) => {
      e.stopPropagation()
      onEditPermissions(item.id)
    },
    [item, onEditPermissions],
  )

  const goObserving = useCallback(
    (e: React.MouseEvent) => {
      e.stopPropagation()
      services.auth.observing.go([item.id])
    },
    [item],
  )

  const setPasswordOnClick = useCallback(
    (e: React.MouseEvent) => {
      e.stopPropagation()
      onEditPassword(item.id)
    },
    [item, onEditPassword],
  )

  const menuItems = useMemo(
    () => [
      {
        icon: <ClusterOutlined />,
        title: '设置权限',
        onClick: setPermissionsOnClick,
        disabled: operatorAccount.id === item.id || (item.isAdmin && !operatorAccount.isSuperAdmin), // 不能改自己的权限；非超级管理员也不能改其他管理员的权限
        disabledTips: operatorAccount.id === item.id ? '不能修改自己的权限' : '管理员无需设置权限',
      },
      {
        icon: <EyeOutlined />,
        title: '查看聊天内容',
        onClick: goObserving,
        disabled: operatorAccount.id === item.id,
      },
      {
        icon: <EditOutlined />,
        title: '修改密码',
        onClick: setPasswordOnClick,
        disabled: !operatorAccount.isAdmin && operatorAccount.id !== item.id,
      },

    ],
    [setPermissionsOnClick, setPasswordOnClick, operatorAccount, item, goObserving],
  )

  return <div key={item.id} css={styles} className={isSelected ? 'selected' : ''} onClick={onClick}>
    <Checkbox
      checked={isChoosed}
      onClick={e => {
        e.stopPropagation()
        switchChoose(item.id)
      }}
    />
    <img src={item.avatar || defaultAvatar} />
    <div className="info">
      <div className="name">
        {item.name}
        {item.remark ? <span className="remark">（{item.remark}）</span> : null}
      </div>
      {groups.length ? (
        <Tooltip
          {...(groups.length > 1 ? {} : { open: false })}
          overlayClassName={getClassName(groupsTooltipStyle)}
          color="#fff"
          mouseEnterDelay={0.5}
          title={<>{groups.map(g => <Tag key={g.id}>{g.name}</Tag>)}</>}
        >
          <div className="groups">{groups.map(g => <span key={g.id}>{g.name}</span>)}</div>
        </Tooltip>
      ) : null}
    </div>
    {qywxCount ? <span className="count">{qywxCount}</span> : null}
    <BeautyMenu items={menuItems}>
      <div className="menu">
        <MenuOutlined />
      </div>
    </BeautyMenu>
  </div>
}

const styles = css`
  align-items: center;
  border-right: 1px solid #f0f0f0;
  display: flex;
  height: 68px;
  position: relative;
  transition: background-color 0.2s;
  user-select: none;
  white-space: nowrap;
  padding-left: 12px;
  &:hover {
    background-color: #fafafa;
  }
  &.selected {
    background-color: #f0f0f0;
  }

  &::after {
    background-color: transparent;
    bottom: 0;
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    transition: background-color 0.2s;
    width: 2px;
  }
  &.selected::after {
    background-color: #4390f7;
  }

  img {
    border-radius: 4px;
    height: 42px;
    margin: 0 10px 0 12px;
    width: 42px;
  }

  .info {
    flex: 1;
    overflow: hidden;
  }
  .name {
    ${ellipsis};
    color: #555;
    font-size: 13px;
  }
  .remark {
    color: #ccc;
  }

  .groups {
    ${ellipsis};
    font-size: 12px;
    padding-top: 4px;
    span {
      color: ${colors.link};
    }
    span:not(:last-child)::after {
      content: '、';
      color: #555;
    }
  }

  .count {
    background-color: #1890ff;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    margin-left: 0.5em;
    padding: 2px 7px;
  }

  .menu {
    padding: 3px 12px 2px 10px;
  }
`

const groupsTooltipStyle = css`
  .ant-tooltip-inner {
    column-gap: 6px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
    .ant-tag {
      margin-right: 0;
    }
  }
`
